<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>走秀首页</title>
    <script src="./js/libs/jquery-1.12.3.js"></script>
    <script src="./js/libs/jquery.lazyload.js"></script>
    <script src="./js/libs/jquery.lazyload.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1443641_czkgfzh7dkj.css">
    <link rel="stylesheet" href="./css/footer.css">

    <link rel="stylesheet" href="./css/tab.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/header.css">
</head>
<script>
    $(function () {
        $("img").lazyload({ effect: "fadeIn" });//lazyload
        (function () {
            //加载头尾
            $(".nav").load("./nav.html")
            $(".header").load("./header.html");
            $(".tab").load("./tab.html")
            $(".footer").load("./footer.html")
        })()
        //延迟加载
        $("img").lazyload({
            effect: "fadeIn",
            placeholder: "./images/timg.gif",
            threshold: 0
        });
        //顶部移入加入边框效果
        $(".tabs-list>li").mouseenter(function () {
            $(this).css("borderBottom", "2px solid orange").siblings().css("borderBottom", "none")
        })
        $(".tabs-list").mouseleave(function () {
            $(this).children().css("borderBottom", "none")
        })
        //顶部第二栏下拉列表
        $(".line2>.line2-Con>.box>.box-name").mouseenter(function () {
            $(this).next().show()
        })
        $(".line2>.line2-Con>.box").mouseleave(function () {
            $(this).children(".box1-list").hide()
        })
        //轮播图
        //克隆
        var $new = $(".lunbotu>li")[0].cloneNode(true)
        $(".lunbotu").append($new)
        //自动轮播
        var $imgIndex = 0;
        var $dianIndex = 0;
        function autoPlay() {
            $imgIndex++;
            if ($imgIndex > 6) {
                $imgIndex = 1;
                $(".lunbotu").css("left", 0)
            }
            $(".lunbotu").animate({
                left: -$imgIndex * 1200
            })
            $dianIndex++;
            if ($dianIndex > 5) {
                $dianIndex = 0;
            }
            $(".square>span").eq($dianIndex).addClass("current").siblings().removeClass()
        }
        window.timer = setInterval(autoPlay, 3000)
        //移入暂停
        $(".lunbotu").mouseenter(function () {
            clearInterval(window.timer)
        })
        $(".lunbotu").mouseleave(function () {
            window.timer = setInterval(autoPlay, 3000)
        })
        // 点击跳转
        // ????????? 速度越来越快
        $(".square span").on("click", function () {
            var $index = $(this).index();
            $imgIndex = $dianIndex = $index - 1;
            autoPlay()
        })
    })
</script>

<body>
    <div class="nav" id="nav"></div>
    <div class="header" id="header"></div>
    <div class="tab" id="tab"></div>

    <div class="main">
            <div class="fixed">
                <ul>
                    <li><a href="#a"><i class="iconfont icon-shoucang"></i><span>尖货推荐</span></a></li>
                    <li><a href="#b"><i class="iconfont icon-youhui"></i><span>特惠推荐</span></a></li>
                    <li><a href="#c"><i class="iconfont icon-good"></i><span>发现好货</span></a></li>
                    <li> <a href="#d"><i class="iconfont icon-nvzhuang"></i><span>女士精选</span></a></li>
                    <li><a href="#e"><i class="iconfont icon-nanzhuang"></i><span>男士精选</span></a></li>
                </ul>
            </div>
            <div class="banner">
                <div class="banner-Con">
                    <div class="inner">
                        <ul class="lunbotu">
                            <li>
                                <a href="#"><img src="./images/banner1.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/banner2.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/banner3.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/banner4.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/banner5.jpg" alt=""></a>
                            </li>
                            <li>
                                <a href="#"><img src="./images/banner6.jpg" alt=""></a>
                            </li>
                        </ul>
                    </div>
                    <div class="square">
                        <span class="current"></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
            <div class="only-photo">
                <img src="./images/only-photo.jpg" alt="">
            </div>
            <p class="title" id="a">尖货推荐</p>
            <div class="main-list1">
                <div class="main-list1-Con">
                    <ul class="main-line1">
                        <li class="pic a"><a href="goods.html"><img data-original="./images/pic1.jpg"
                                    src="./images/timg.gif" alt=""></a></li>
                        <li class="pic b"><a href="goods.html"><img data-original="./images/pic2.jpg"
                                    src="./images/timg.gif" alt=""></a></li>
                        <li class="pic c"><a href="goods.html"><img data-original="./images/pic3.jpg"
                                    src="./images/timg.gif" alt=""></a></li>
                    </ul>
                    <ul class="main-line1-1">
                        <li class="pic a"><a href="goods.html"><img data-original="./images/pic4.jpg"
                                    src="./images/timg.gif" alt=""></a></li>
                        <li class="pic b"><a href="goods.html"><img data-original="./images/pic5.jpg"
                                    src="./images/timg.gif" alt=""></a></li>
                        <li class="pic c"><a href="goods.html"><img data-original="./images/pic6.jpg"
                                    src="./images/timg.gif" alt=""></a></li>
                    </ul>
                </div>
            </div>
            <p class="title" id="b">特惠推荐</p>
            <div class="main-list2">
                <ul class="main-line2">
                    <li class="pic2"><a href="#"><img data-original="./images/pic2-1.jpg" src="./images/timg.gif"
                                alt=""></a></li>
                    <li class="pic2"><a href="#"><img data-original="./images/pic2-2.jpg" src="./images/timg.gif"
                                alt=""></a></li>
                </ul>
            </div>
            <p class="title" id="c">发现好货</p>
            <div class="main-list3">
                <div class="main-list3-Con">
                    <ul class="main-line3">
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1555313564638.jpg?x-format,webp/interlace,1"
                                    src="./images/timg.gif" alt="">
                                <span>Babybol</span>
                                <div class="">男童小童春秋冬简约百搭单排扣翻领针织毛衣上衣</div>
                                <p>￥&nbsp;174.00 </p>
                            </a></li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.sku.xiu.com/upload/goods20190211/10625797/106257970003/ori1.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    src="./images/timg.gif" alt="">

                                <span>Burberry</span>
                                <div class="">男士经典长袖衬衫</div>
                                <p>￥&nbsp;1299.00 </p>
                            </a></li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1567747367480.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    src="./images/timg.gif" alt=""></a>
                            <span>Coach</span>
                            <div class="">女士链条包 30592B4RU 棕色</div>
                            <p>￥&nbsp;3599.00 </p>
                        </li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1555492220667.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    alt=""></a>
                            <span>Alexander McQueen</span>
                            <div class="">女性时尚红色印花丝巾 100cm*120cm</div>
                            <p>￥&nbsp;799.00 </p>
                        </li>
                    </ul>
                    <ul class="main-line3">
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1567525889375.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    src="./images/timg.gif" alt="">
                                <span>Swarovski</span>
                                <div class="">女士时尚黑天鹅 ICONIC SWAN 珍珠般质地 耳钉耳环女 5193949</div>
                                <p>￥&nbsp;1071.00 </p>
                            </a></li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1554189286771.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    src="./images/timg.gif" alt="">

                                <span>Swisse</span>
                                <div class="">护肝保肝片奶蓟草 解酒排毒120粒</div>
                                <p>￥&nbsp;115.00 </p>
                            </a></li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1554774476819.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    src="./images/timg.gif" alt=""></a>
                            <span>Cremieux</span>
                            <div class="">黑色男头层牛皮拼色线拼雕花布洛克商务皮鞋</div>
                            <p>￥&nbsp;199.00 </p>
                        </li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1555492539086.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    alt=""></a>
                            <span>Alexander McQueen</span>
                            <div class="">女性时尚黄色印花丝巾 140cm*140cm</div>
                            <p>￥&nbsp;799.00 </p>
                        </li>
                    </ul>
                    <ul class="main-line3">
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.sku.xiu.com/upload/goods20190211/10625798/106257980004/ori1.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    src="./images/timg.gif" alt="">
                                <span>Burberry</span>
                                <div class="">男士经典长袖衬衫</div>
                                <p>￥&nbsp;1299.00 </p>
                            </a></li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.sku.xiu.com/upload/goods20160513/13084276/130842760002/ori1.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    src="./images/timg.gif" alt="">

                                <span>Gatta</span>
                                <div class="">女15D不掉裆经典连裤袜 黑色</div>
                                <p>￥&nbsp;68.00 </p>
                            </a></li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1560218327637.png?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    src="./images/timg.gif" alt=""></a>
                            <span>Alpha Industries</span>
                            <div class="">女士拉链夹克衫外套19年春季新款</div>
                            <p>￥&nbsp;1511.00 </p>
                        </li>
                        <li class="pic3"><a href="goods.html"><img
                                    data-original="http://img.cms.xiu.com/1567847732510.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                                    alt=""></a>
                            <span>Giorgio Armani</span>
                            <div class="">男士蓝色Logo围巾</div>
                            <p>￥&nbsp;1815.00 </p>
                        </li>
                    </ul>
                </div>
            </div>
            <p class="title" id="d">女士精选</p>
            <div class="woman"><img
                    src="http://img.cms.xiu.com/1562310891687.jpg?x-image-process=image/format,webp/interlace,1" alt="">
            </div>
            <div class="woman-list">
                <div class="left">
                    <ul>
                        <li class="pic4"><a href="goods.html"><img
                            data-original="http://img.cms.xiu.com/1568697966241.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                            src="./images/timg.gif" alt="">
                        <span>Pitta Mask</span>
                        <div class="">百搭款口罩 3片装/盒</div>
                        <p>￥&nbsp;43.00 </p>
                    </a></li>
                <li class="pic4"><a href="goods.html"><img
                            data-original="http://img.cms.xiu.com/1554345496954.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                            src="./images/timg.gif" alt="">

                        <span>Comoliving</span>
                        <div class="">阿斯顿亚麻黑白色织格枕套</div>
                        <p>￥&nbsp;499.00 </p>
                    </a></li>
                <li class="pic4"><a href="goods.html"><img
                            data-original="http://img.cms.xiu.com/1554089441515.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                            src="./images/timg.gif" alt=""></a>
                    <span>Trussardi</span>
                    <div class="">男士印花纯棉短袖T恤</div>
                    <p>￥&nbsp;999.00 </p>
                </li>
                <li class="pic4"><a href="goods.html"><img
                            data-original="http://img.cms.xiu.com/1567847732510.jpg?x-image-process=image/resize,w_750/format,webp/interlace,1"
                            alt=""></a>
                    <span>Giorgio Armani</span>
                    <div class="">男士蓝色Logo围巾</div>
                    <p>￥&nbsp;1815.00 </p>
                </li>
                    </ul>
                </div>
                <div class="right">
                   <img data-original="http://img.cms.xiu.com/1567475437036.jpg?x-image-process=image/resize,w_600/format,webp/interlace,1" src="./images/timg.gif" alt="">
                   <img data-original="http://img.cms.xiu.com/1567475333810.jpg?x-image-process=image/resize,w_600/format,webp/interlace,1" src="./images/timg.gif" alt="">
                   <img data-original="http://img.cms.xiu.com/1561517063576.jpg?x-image-process=image/resize,w_600/format,webp/interlace,1" src="./images/timg.gif" alt="">
                   <img data-original="http://img.cms.xiu.com/1565769849707.jpg?x-image-process=image/resize,w_600/format,webp/interlace,1" src="./images/timg.gif" alt="">
                </div>
            </div>
            <p class="title" id="e">男士精选</p>
            <div class="man"><img
                    src="http://img.cms.xiu.com/1562310849294.jpg?x-image-process=image/format,webp/interlace,1" alt="">
            </div>
    </div>
    <div class="find">
        <a href="#">发现更多&gt;</a>
    </div>
    <div class="footer" id="footer"></div>
</body>

</html>